<!-- card Json -->
<template>
  <div class="template_text_basic">
    <div style="display: flex;flex-direction: column;width: 100%;">
      <div class="toText">{{ 'Subject' }}</div>
      <el-input label="Subject" v-model="dataForm[scriptItem.text].title" required placeholder="Please Enter Subject">
      </el-input>
      <el-divider></el-divider>
      <div style="position: relative;">
        <div class="toText">{{ 'Content' }}</div>
        <div>
          <div class="quill-custom-css">
            <ZTinymce v-model="dataForm[scriptItem.text].message"
                ref="myTextEditor"
                :height="50" />
            <div class="insert-token">
              <el-tooltip :open-delay="1000" class="item" effect="dark" :content="$t('statement.iat')" placement="top">
                <el-popover placement="top" width="380" v-model="insertTokenPopover">
                  <div v-if="!isShowChild&&!isShowChildDrillThrough"
                    style="color:#000;font-size:16px;font-weight: 600;margin-bottom:10px">{{$t('statement.dt')}}</div>
                  <div v-else class="cursor_pointer"
                    style="color:#000;font-size:16px;font-weight: 600;margin-bottom:10px" @click="gotoback"><i
                      class="el-icon-arrow-left"></i>&nbsp;&nbsp;{{$t('statement.fn')}}</div>
                  <el-input v-if="!isShowChild&&!isShowChildDrillThrough" v-model="searchToken"
                    prefix-icon="el-icon-search" :placeholder="$t('placeholder.search')" @input="getFilterTokenList"
                    size="small" style="margin-bottom:10px;"></el-input>
                  <el-input v-if="isShowChild||isShowChildDrillThrough" v-model="searchTokenchild"
                    prefix-icon="el-icon-search" :placeholder="$t('placeholder.search')"
                    @input="getFilterTokenchildList" size="small" style="margin-bottom:10px;"></el-input>
                  <div v-if="isTipsShow&&!isShowChild&&!isShowChildDrillThrough"
                    style="height:50px;backgroundColor:#E6F7FF;">
                    <div
                      style="float:left;width:90%;color:#138DC7;line-height:20px;padding:5px;padding-left:9px;word-break: break-word;">
                      {{$t('statement.adtfd')}}</div>
                    <i @click="isTipsShow=false" class="el-icon-close cursor_pointer"
                      style="float:right;color:#138DC7;margin:8px 9px 0 0"></i>
                  </div>
                  <el-alert
                    v-if="!(filterTokenList.length>0&&filterTokenList[0].fieldsList.length>0)&&!drillThroughFieldsListarr.length>0"
                    style="margin-top:10px" :closable="false" center :title="$t('statement.nmd')" type="info">
                  </el-alert>
                  <div class="token-list" v-if="filterTokenList.length>0&&filterTokenList[0].fieldsList.length>0">
                    <div class="token-list-item" v-for="(item, index) in filterTokenList" :key="index">
                      <!-- <el-divider v-if="!isShowChild" class="split-line"></el-divider> -->
                      <div v-if="!isShowChild&&!isShowChildDrillThrough">
                        <div class="group-title" style="backgroundColor:#F0F0F0;padding-left:9px;"
                          :style="{'margin-top':isTipsShow?'10px':0}">{{$t('statement.dsf')}}</div>
                        <div style="max-height: 150px;overflow:auto">
                          <div class="group-item" v-for="(its, ii) in item.fieldsList" :key="ii"
                            @click="its.type === 'user' ? openChild(its) : clickToken(its)"><span
                              :style="{'font-weight':its.type === 'user'? '600' : '400'}">{{ its.type === 'user' ?
                              its.label.replace(/[\{\}]/g,'') : its.label}}</span>
                            <i v-if="its.type === 'user'" class="el-icon-arrow-right"
                              style="float:right;padding-top:10px"></i>
                          </div>
                        </div>
                      </div>
                      <div v-if="isShowChild&&!isShowChildDrillThrough">
                        <div class="group-item" v-for="its in filteruserfieldsList" :key="its.value"
                          @click="clickTokenchild(its)">{{ its.label }}
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="token-list" v-if="drillThroughFieldsListarr.length>0">
                    <div class="token-list-item">
                      <div v-if="!isShowChild&&!isShowChildDrillThrough">
                        <div class="group-title" style="backgroundColor:#F0F0F0;padding-left:9px;">
                          {{$t('statement.dtf')}}</div>
                        <div style="height: 150px;overflow:auto">
                          <div class="group-item" v-for="(its, ii) in drillThroughFieldsListarr" :key="ii"
                            @click="openChildDrillThrough(its,ii)"><span
                              style="font-weight:600">{{its.datasetName}}</span>
                            <i class="el-icon-arrow-right" style="float:right;padding-top:10px"></i>
                          </div>
                        </div>
                      </div>
                      <div v-if="!isShowChild&&isShowChildDrillThrough" style="max-height:442px;overflow:auto">
                        <div class="group-item" v-for="its in childDrillThroughfieldsList" :key="its.value"
                          @click="clickTokenchild(its,true)">{{ its.label }}
                        </div>
                      </div>
                    </div>
                  </div>
                  <el-button size="mini" type="primary" plain slot="reference" style="padding:7px;border:none;">
                    <span class="cuifont icon_insert_token" style="fontSize:14px;"></span>
                  </el-button>
                </el-popover>
              </el-tooltip>
            </div>
          </div>
          <div class="quill-footer-css">
            <el-checkbox v-model="priviewChecked" @change="onMessageChange">{{$t('custom.bots.preview')}}</el-checkbox>
            <div>
              <label for="">{{$t('statement.ct')}}</label>
              <el-select v-model="templateId" filterable clearable :placeholder="scriptItem.hint" default-first-option>
                <div class="template-page-link el-select-dropdown__item" @click="routerToTemplatePage">
                  {{$t('statement.mmt')}}</div>
                <el-divider class="split-line"></el-divider>
                <el-option v-for="(o,ii) in selectDataObj[`${scriptItem.text}ListsOrigin`]" :key="ii"
                  :value="o[scriptItem.fieldValue]" :label="o[scriptItem.fieldLabel]"></el-option>
              </el-select>
            </div>
            <el-popover placement="top" width="205" @hide="clearPopover" v-model="editTemplatePopover">
              <el-form :model="editTemplateForm" :rules="dataRule" size="mini" ref="template-form" label-position="top">
                <el-form-item :label="$t('label.tn')" prop="name">
                  <el-input v-model="editTemplateForm.name" :placeholder="$t('placeholder.pe')"></el-input>
                </el-form-item>
                <el-form-item :label="$t('label.tt')" prop="type">
                  <!-- <el-input v-model="editTemplateForm.type"
                      placeholder="Please Select"></el-input> -->
                  <el-select v-model="editTemplateForm.type" :placeholder="$t('placeholder.ps')">
                    <el-option v-for="its in ['teams_message','email']" :key="its" :label="its" :value="its">
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item>
                  <el-checkbox v-model="viewTemplatePage">{{$t('statement.vaa')}}</el-checkbox>
                </el-form-item>
              </el-form>
              <div class="popover-footer-btn">
                <el-button size="mini" @click="editTemplatePopover = false">{{$t('attribute.close')}}</el-button>
                <el-button size="mini" type="primary" :loading='addBtnLoading' @click="addMessageTemplate">
                  {{$t('attribute.add')}}</el-button>
              </div>
              <el-button size="mini" type="primary" plain style="margin-right:15px;padding:7px;border:none;"
                slot="reference">
                <!-- <span class="cuifont icon_mail_add"
                style="fontSize:14px;"></span> -->
                <span style="fontSize:14px;">{{$t('statement.saat')}}</span>
              </el-button>
              <!-- <div class="cuifont icon_mail_add"
           slot="reference"></div> -->
            </el-popover>
          </div>
          <div v-if="priviewChecked">
            <el-switch v-model="switchPreview" active-text=" Dark Mode" inactive-text="Light Mode ">
            </el-switch>
            <div v-if="!switchPreview" class="ql-editor">
              <div style="background-color:#FFFFFF;color:#1e1e1e;" v-html="priviewMessage"></div>
            </div>
            <div v-else class="ql-editor">
              <div style="background-color:#292929;color:#FFFFFF;" v-html="priviewMessage"></div>
            </div>
          </div>
        </div>
        <div style="margin-top:10px">
          <div class="toText" style="display:flex">
            <div>{{ 'Actions' }}</div>
            <el-tooltip :open-delay="1000" class="item" effect="dark" :enterable="false"
              :content="$t('custom.component.datasetsqlmodel.addnewaction')" placement="top">
              <el-button style="font-size: 16px;margin-left:10px" @click="dialogVisible = !dialogVisible" type="text"
                size="mini" icon="el-icon-circle-plus-outline"></el-button>
            </el-tooltip>
          </div>
          <div :key="dataForm[scriptItem.text].actions.length">
            <div v-for="(item,index) in dataForm[scriptItem.text].actions" :key="index"
              style="display:flex;justify-content:space-between;margin-top:10px">
              <el-button style="max-width:300px" size="mini"><div class="online_more_text">{{item.title}}</div></el-button>
              <div>
                <el-tooltip :open-delay="1000" class="item" effect="dark" :enterable="false"
                  :content="$t('custom.component.datasetsqlmodel.edit')" placement="top">
                  <el-button style="font-size: 16px;" @click="editAction(item,index)" type="text" size="mini"
                    icon="el-icon-edit"></el-button>
                </el-tooltip>
                <el-tooltip :open-delay="1000" class="item" effect="dark" :enterable="false"
                  :content="$t('custom.component.datasetsqlmodel.delete')" placement="top">
                  <el-button style="margin-left: 23px;font-size: 16px;" @click="deleteAction(index)" type="text"
                    size="mini" icon="el-icon-delete"></el-button>
                </el-tooltip>
              </div>
            </div>
          </div>
          <el-dialog title="Action" append-to-body @closed="resetForm('actionForm')" :visible.sync="dialogVisible"
            width="500px">
            <el-form ref="actionForm" :model="actionForm" :rules="rules" label-width="80px">
              <el-form-item label="Type:" prop="type">
                <el-select v-model="actionForm.type" style="width:100%"
                  :placeholder="$t('custom.component.columns.pleaseselect')" @change="changeTypeHander('actionForm')">
                  <el-option label="Submit" value="1"></el-option>
                  <el-option label="Open Url" value="2"></el-option>
                  <el-option label="ImBack" value="3"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="Title:" prop="title" v-if="actionForm.type" style="margin-top:18px">
                <el-input v-model="actionForm.title"></el-input>
              </el-form-item>
              <el-form-item label="Message" v-if="actionForm.type === '1' || actionForm.type === '3'" prop="message"
                style="margin-top:18px">
                <el-input v-model="actionForm.message"></el-input>
              </el-form-item>
              <el-form-item label="Url:" v-if="actionForm.type === '2'" prop="url" style="margin-top:18px">
                <el-input v-model="actionForm.url"></el-input>
              </el-form-item>
              <el-form-item label="Value:" v-if="actionForm.type === '1'" prop="value" style="margin-top:18px">
                <el-input v-model="actionForm.value"></el-input>
              </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
              <el-button size="mini" @click="resetForm('actionForm')">{{$t('cancel')}}</el-button>
              <el-button size="mini" type="primary" @click="submitForm('actionForm')">{{$t('confirm')}}</el-button>
            </span>
          </el-dialog>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import mixinTypeViewModule from '@/mixins/script-type-view-module'
import ZTinymce from '@/components/storybook/z-tinymce/index.vue'
import { debounce } from 'lodash'
export default {
  mixins: [mixinTypeViewModule],
  components: {
    ZTinymce
  },
  inject: {botInfo:{default:()=>{}}},
  data () {
    return {
      currentData: {
        'type': 'AdaptiveCard',
        'body': [
          {
            'type': 'TextBlock',
            'size': 'Medium',
            'weight': 'Bolder',
            'text': ''
          },
          {
            'type': 'TextBlock',
            'text': '',
            'wrap': true
          }
        ],
        'actions': [],
        '$schema': 'http://adaptivecards.io/schemas/adaptive-card.json',
        'version': '1.2'
      },
      insertTokenPopover: false,
      searchToken: null,
      searchTokenchild: null,
      tokenList: [],
      filterTokenList: [],
      priviewChecked: false,
      priviewMessage: null,
      switchPreview: false,
      isTipsShow: true,
      isShowChild: false,
      isShowChildDrillThrough: false,
      drillThroughFieldsList: [],
      drillThroughFieldsListarr: [],
      childDrillThroughfieldsList: [],
      childDrillThroughfieldsListarr: [],
      filteruserfieldsList: [],
      fatherfield: null,
      fatherfieldDrillThrough: null,
      userfieldsList: [{ label: '{headUrl}', value: 'headUrl' },
        { label: '{email}', value: 'email' },
        { label: '{firstName}', value: 'firstName' },
        { label: '{lastName}', value: 'lastName' },
        { label: '{fullName}', value: 'fullName' }],
      dialogVisible: false,
      actionForm: {
        type: '',
        title: '',
        message: '',
        url: '',
        value: ''
      },
      rules: {
        type: [
          { required: true, message: this.$t('custom.component.columns.pleaseselect'), trigger: 'blur' }
        ],
        title: [
          { required: true, message: this.$t('custom.mapping.enter'), trigger: 'blur' }
        ],
        message: [{ required: true, message: this.$t('custom.mapping.enter'), trigger: 'blur' }],
        url: [{ required: true, message: this.$t('custom.mapping.enter'), trigger: 'blur' }]
      },
      isEdit: false,
      editIndex: null,
      templateId: null,
      editTemplatePopover: false,
      editTemplateForm: {
        name: null,
        type: null
      },
      viewTemplatePage: false,
      dataRule: {
        name: [
          { required: true, message: this.$t('validate.required'), trigger: 'blur', pattern: '[^ \x22]+' },
          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
        ],
        type: [
          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
        ]
      },
      addBtnLoading: false
    }
  },
  props: {
    // labelInfo: {
    //   type: String
    // }
  },
  created () {
    if (!this.dataForm[this.scriptItem.text]) {
      this.dataForm[this.scriptItem.text] = this.currentData
    }
    this.initTempSelectDatasetKey()
    if (this.botInfo() && this.botInfo().triggerType === 'Stream') {
      this.getTemplateParamsList()
    } else {
      this.getTokenList()
    }
    // if (this.labelInfo && this.labelInfo === 'Microsoft Teams Channel') {
    //   this.userfieldsList.unshift({
    //     label: `{ @ }`,
    //     value: 'fullName'
    //   })
    // }
    this.filteruserfieldsList = this.userfieldsList
  },
  watch: {
    isShowChild (val) {
      if (!val) {
        this.searchTokenchild = null
        this.resetFilterTokenchildList(this.searchTokenchild)
      }
    },
    isShowChildDrillThrough (val) {
      if (!val) {
        this.searchTokenchild = null
        this.resetFilterTokenchildList(this.searchTokenchild)
      }
    },
    insertTokenPopover: {
      handler: function (val) {
        if (val) {
          this.isTipsShow = true
          document.addEventListener('mousedown', this.mouseDownListener)
        } else {
          document.removeEventListener('mousedown', this.mouseDownListener)
          this.searchToken = null
          this.resetFilterTokenList(this.searchToken)
          this.searchTokenchild = null
          this.resetFilterTokenchildList(this.searchTokenchild)
          this.isShowChild = false
          this.isShowChildDrillThrough = false
        }
      },
      immediate: true
    },
    editTemplatePopover: {
      handler: function (val) {
        if (val) {
          document.addEventListener('mousedown', this.mouseDownListener)
        } else {
          document.removeEventListener('mousedown', this.mouseDownListener)
        }
      },
      immediate: true
    },
    templateId (val) {
      if (val) {
        try {
          this.dataForm[this.scriptItem.text].message = this.selectDataObj[`${this.scriptItem.text}ListsOrigin`].find(e => e[this.scriptItem.fieldValue] === this.templateId)[this.scriptItem.templateFields]
        } catch (error) { }
      }
    }
  },
  methods: {
    editAction (item, index) {
      this.isEdit = true
      this.editIndex = index
      this.actionForm = JSON.parse(JSON.stringify(item))
      this.dialogVisible = true
    },
    deleteAction (index) {
      this.dataForm[this.scriptItem.text].actions.splice(index, 1)
    },
    changeTypeHander (formName) {
      this.actionForm.title = ''
      this.actionForm.message = ''
      this.actionForm.url = ''
      this.actionForm.value = ''
      this.$refs[formName].clearValidate()
    },
    submitForm (formName) {
      let _self = this
      _self.$refs[formName].validate((valid) => {
        if (valid) {
          if (_self.isEdit) {
            if (_self.editIndex !== null) {
              _self.dataForm[_self.scriptItem.text].actions[_self.editIndex] = JSON.parse(JSON.stringify(_self.actionForm))
            }
          } else {
            _self.dataForm[_self.scriptItem.text].actions.push(JSON.parse(JSON.stringify(_self.actionForm)))
          }
          _self.$forceUpdate()
          _self.resetForm('actionForm')
        } else {
          return false
        }
      })
    },
    resetForm (formName) {
      if (this.$refs[formName]) {
        this.actionForm = {
          type: '',
          title: '',
          message: '',
          url: '',
          value: ''
        }
        this.$refs[formName].resetFields()
        this.$refs[formName].clearValidate()
      }
      this.dialogVisible = false
      this.isEdit = false
      this.editIndex = null
    },
    inputChange () {
      this.$forceUpdate()
    },
    initTempSelectDatasetKey () {
      if (!this.dataForm[`${this.scriptItem.datasetKeyStore}UseFidld`]) this.dataForm[`${this.scriptItem.datasetKeyStore}UseFidld`] = []
    },
    gotoback () {
      this.isShowChild = false
      this.isShowChildDrillThrough = false
    },
    mouseDownListener (event) {
      if (!event.target.closest('.block-model-dialog')) {
      } else {
        this.insertTokenPopover = false
        this.editTemplatePopover = false
      }
    },
    getTokenList () {
      let id = this.$store.state.bot.id
      let type = this.$store.state.bot.type
      this.tokenList = []
      if (!id) {
        return
      }
      const params = {}
      type === 'dataset' && (params['datasetId'] = id)
      type === 'widget' && (params['gadgetId'] = id)
      params.showColumn = true
      this.$interface.reports.getFieldsListApi(params)
        .then(({ data: res }) => {
          if (res.code !== 0) {
            this.tokenList = []
            return false
          }
          if (res.querySelectedColumns) {
            this.dataForm.resultValue = res.querySelectedColumns
            this.drillThroughFieldsList = res.querySelectedColumns
            this.drillThroughFieldsList.forEach(item => {
              item.data.forEach(its => {
                its.label = `{{${its.alias}}}`
                its.value = its.alias
              })
            })
            this.drillThroughFieldsListarr = this.drillThroughFieldsList
          }
          let tempList = []
          res.data.forEach(item => {
            if (item.type === 'user') {
              tempList.unshift({
                label: `{{${item.name}}}`,
                value: item.name,
                type: item.type
              })
            } else {
              tempList.push({
                label: `{{${item.name}}}`,
                value: item.name,
                type: item.type
              })
            }
          })
          this.tokenList.push({
            name: this.$store.state.bot.name,
            fieldsList: tempList
          })
          this.$nextTick(() => {
            this.resetFilterTokenList()
          })
        }).catch(() => {
          this.tokenList = []
        })
    },
    resetFilterTokenList (val) {
      let searchVal = val || this.searchToken
      if (searchVal) {
        let copyData = this._.cloneDeep(this.tokenList)
        for (let i = 0; i < copyData.length; i++) {
          copyData[i].fieldsList = copyData[i].fieldsList.filter(its => its.label.toLowerCase().includes(searchVal.toLowerCase()))
        }
        this.filterTokenList = copyData
      } else {
        this.filterTokenList = this.tokenList
      }
      if (searchVal) {
        let copyData = JSON.parse(JSON.stringify(this.drillThroughFieldsList))
        copyData = copyData.filter(its => its.datasetName.toLowerCase().includes(searchVal.toLowerCase()))
        this.drillThroughFieldsListarr = copyData
      } else {
        this.drillThroughFieldsListarr = this.drillThroughFieldsList
      }
    },
    resetFilterTokenchildList (val) {
      let searchVal = val || this.searchTokenchild
      if (searchVal) {
        let copyData = this._.cloneDeep(this.userfieldsList)
        copyData = copyData.filter(its => its.label.toLowerCase().includes(searchVal.toLowerCase()))
        this.filteruserfieldsList = copyData
      } else {
        this.filteruserfieldsList = this.userfieldsList
      }
      if (searchVal) {
        let copyData = this._.cloneDeep(this.childDrillThroughfieldsListarr)
        copyData = copyData.filter(its => its.label.toLowerCase().includes(searchVal.toLowerCase()))
        this.childDrillThroughfieldsList = copyData
      } else {
        this.childDrillThroughfieldsList = this.childDrillThroughfieldsListarr
      }
    },
    getFilterTokenList: debounce(function (val) {
      this.resetFilterTokenList(val)
    }, 800),
    getFilterTokenchildList: debounce(function (val) {
      this.resetFilterTokenchildList(val)
    }, 800),
    clickToken (its) {
      if (!(this.dataForm[`${this.scriptItem.datasetKeyStore}UseFidld`].find(item => item.field === its.value))) {
        this.dataForm[`${this.scriptItem.datasetKeyStore}UseFidld`].push({
          field: its.value,
          dbType: its.type
        })
      }
      this.insertFields(its.value)
    },
    clickTokenchild (its, isDrillThrough) {
      if (isDrillThrough) {
        this.insertFields(`${this.fatherfield}#${its.value}`)
      } else {
        // if (this.labelInfo && this.labelInfo === 'Microsoft Teams Channel' && its.label === '{ @ }') {
        //   this.insertFields(`@${this.fatherfield}.${its.value}`)
        // } else {
        //   this.insertFields(`${this.fatherfield}.${its.value}`)
        // }
        this.insertFields(`${this.fatherfield}.${its.value}`)
      }
    },
    openChild (its) {
      this.fatherfield = its.value
      this.isShowChild = true
    },
    openChildDrillThrough (its, index) {
      this.fatherfield = its.datasetName
      this.isShowChildDrillThrough = true
      this.childDrillThroughfieldsListarr = this.drillThroughFieldsListarr[index].data
      this.childDrillThroughfieldsList = this.childDrillThroughfieldsListarr
    },
    insertFields (value) {
      if (!value) {
        return false
      }
      this.$refs['myTextEditor'].focus()
      const range = this.$refs['myTextEditor'].getRng()

      const node = document.createElement('span');
      node.innerHTML = `<span>&nbsp;&nbsp;</span><strong>{{${value.replace(/ /g, "&nbsp;")}}}</strong><span>&nbsp;&nbsp;</span>`;

      range.insertNode(node);
    },
    routerToTemplatePage () {
      this.$confirm(this.$t('custom.leaveTips'), this.$t('prompt.title'), {
        confirmButtonText: this.$t('confirm'),
        cancelButtonText: this.$t('cancel'),
        type: 'warning'
      })
        .then(() => {
          this.$emit('hiddenSettingModel')
          this.$root.eventBus.$emit('viewAfterAdding')
          this.$router.push({
            name: 'mspbots-template-management-email-and-message-index'
          })
        })
        .catch(() => { })
    },
    addMessageTemplate () {
      this.$refs['template-form'].validate((valid) => {
        if (!valid) {
          return false
        }
        this.addBtnLoading = true
        const params = {
          template: this.dataForm[this.scriptItem.text].message || '',
          ...this.editTemplateForm
        }
        this.$interface.schedule.saveTemplateInfoApi(params)
          .then(({ data: res }) => {
            this.addBtnLoading = false
            if (res.code !== 0) {
              return this.$message.error(res.msg)
            }
            this.$message.success(res.msg)
            this.editTemplatePopover = false
            this.init()
            this.viewTemplatePage && this.routerToTemplatePage()
          }).catch(() => {
            this.addBtnLoading = false
          })
      })
    },
    clearPopover () {
      this.$refs['template-form'].resetFields()
      this.viewTemplatePage = false
    },
    getTemplateParamsList () {
      var _self = this
      _self.$interface.schedule.getTemplateFieldsListApi()
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return _self.$message.error(res.msg)
          }
          var name
          if (_self.botInfo().sysBotScriptList.length === 1) {
            name = _self.botInfo().sysBotScriptList[0].paramsValue.type
          } else {
            var block = _self.botInfo().flowSetting.find(item => item.id === 0)
            var sysbot = _self.botInfo().sysBotScriptList.find(item => item.scriptId === block.blockId)
            name = sysbot.paramsValue.type
          }
          var result = res.data.find(i => i.name === name)
          let tempList = []
          result.info.forEach(item => {
            tempList.push({
              label: `{{${item.key}}}`,
              value: item.key,
              type: item.type
            })
          })
          tempList.push({
            label: `{{email}}`,
            value: 'email',
            type: 'text'
          })
          tempList.push({
            label: `{{firstName}}`,
            value: 'firstName',
            type: 'text'
          })
          tempList.push({
            label: `{{lastName}}`,
            value: 'lastName',
            type: 'text'
          })
          tempList.push({
            label: `{{fullName}}`,
            value: 'fullName',
            type: 'text'
          })
          this.tokenList.push({
            name: this.$store.state.bot.name,
            fieldsList: tempList
          })
          this.$nextTick(() => {
            this.resetFilterTokenList()
          })
        }).catch(() => { })
    },
    deleteDatasetKey () {
      let arr = []
      this.dataForm[`${this.scriptItem.datasetKeyStore}UseFidld`].forEach(element => {
        if (this.dataForm[this.scriptItem.text].message.indexOf(`{{${element.field}}}`) !== -1) arr.push(element)
      })
      this.dataForm[`${this.scriptItem.datasetKeyStore}UseFidld`] = arr
    },
    onMessageChange () {
      this.deleteDatasetKey()
      this.priviewMessage = this.dataForm[this.scriptItem.text].message
      this.$forceUpdate()
    }
  }
}
</script>

<style lang="scss">
.template_text_basic {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-top: 6px;
  margin-bottom: 10px;
  // box-shadow:  0px 1px 0px 0px #F0F0F0;
  padding: 5px 0;

  .el-input {
    flex: 1;

    input {
      margin-left: 15px;
    }
  }

  .el-input__inner {
    border: 0;
  }

  .el-textarea {
    flex: 1;

    input {
      margin-left: 15px;
    }
  }

  .insert-token {
    position: absolute;
    right: 0;
    top: 0;
    width: 30px;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
</style>
<style scoped lang='scss'>
.cursor_pointer {
  cursor: pointer
}

.token-list {
  &-item {
    .group-title {
      color: rgba(0, 0, 0, 0.5);
      font-size: 12px;
      width: 100%;
      height: 30px;
      line-height: 30px;
      margin-top: 10px;
    }

    .group-item {
      height: 34px;
      line-height: 34px;
      padding: 0 10px 0 19px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      cursor: pointer;

      &:hover {
        background: #f5f7fa;
      }
    }
  }
}
</style>
<style lang='scss'>
  .quill-custom-css {
    position: relative;
    .ql-editor{
      img{
        image-rendering: -moz-crisp-edges;         /* Firefox */
        image-rendering:   -o-crisp-edges;         /* Opera */
        image-rendering: -webkit-optimize-contrast;/* Webkit (non-standard naming) */
        image-rendering: crisp-edges;
        -ms-interpolation-mode: nearest-neighbor;  /* IE (non-standard property) */
        width: auto;
        height: auto;
      }
    }
    .insert-token {
      position: absolute;
      right: 10px;
      top: 3px;
      width: 30px;
      height: 30px;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .quill-content-css {
      .ql-snow {
        padding: 0 20px;
        & .ql-tooltip {
          z-index: 1;
          left: 10px !important;
        }
        &.ql-toolbar button,
        & .ql-toolbar button,
        & .ql-color-picker,
        & .ql-icon-picker {
          width: 14px;
          height: 14px;
          padding: 0;
          & svg {
            float: left;
          }
        }
        & .ql-picker-label {
          padding: 0;
          border: none;
          float: left;
        }
        & .ql-formats {
          margin-right: 20px;
          & button {
            margin-right: 20px;
            &:last-child {
              margin-right: 0;
            }
          }
        }
      }
    }
  }
  .quill-footer-css {
    // border: 1px solid #ccc;
    margin-top: 10px;
    border-top: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    input {
      border: none;
      &::-webkit-input-placeholder {
        color: $--theme-color !important;
      }
    }
    .el-form-item--mini.el-form-item,
    .el-form-item--small.el-form-item {
      margin-bottom: 10px;
    }
    .el-popover .el-select {
      width: 100%;
    }
  }
  .split-line {
    margin: 0 !important;

  }
  .template-page-link {
    width: 100%;
    color: $--theme-color;
  }
  </style>
  <style scoped lang='scss'>
  .cursor_pointer {
    cursor:pointer
  }
  .popover-footer-btn {
    display: flex;
    justify-content: flex-end;
    align-items: center;
  }
  .token-list {
    &-item {
      .group-title {
        color: rgba(0, 0, 0, 0.5);
        font-size: 12px;
        width: 100%;
        height: 30px;
        line-height: 30px;
        margin-top: 10px;
      }
      .group-item {
        height: 34px;
        line-height: 34px;
        padding: 0 10px 0 19px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        cursor: pointer;
        &:hover {
          background: #f5f7fa;
        }
      }
    }
  }
  </style>
